<template>
  <div class="vanta_area"
       ref="Area"
       style="height: 100vh ;width: 100vw">
      <Header style="height: 10vh ;width: 100vw" active-index="0"/>
      <router-view style="height: 90vh; width: 100vw"
                   :key="routeKey"/>
  </div>

<!--  <div class="vanta_area" ref="Area"></div>-->

</template>

<script setup>
import Header from "@/components/HomeNavigation/Header.vue";
import * as THREE from 'three'
import CLOUDS  from 'vanta/dist/vanta.clouds.min'
import {onMounted, onBeforeUnmount, ref, watch} from 'vue'
import {useRoute} from "vue-router";

//使用ref引用挂载区域
const Area=ref(null)
//创建一个全局的变量来使用vanta.js
/**
 *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
 *但是vue3 setup中是没有this，所以要另外创建一个
 **/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
  vantaEffect=CLOUDS({
    el:Area.value,
    THREE:THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
  })
})

onBeforeUnmount(()=>{
  if(vantaEffect){
    vantaEffect.destroy()
  }
})
const route = useRoute()
const routeKey = ref(0)
watch(
    () => route.path,
    (newValue, oldValue) => {
      // console.log(`路由变化：${oldValue} -> ${newValue}`)
      location.reload()
    }
)
</script>

<style scoped>

</style>